<div class="repair-request-page">
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-md-8 col-lg-6">
        
        <!-- 页面标题 -->
        <div class="page-header mb-4">
          <h2 class="page-title">
            <i class="bi bi-tools"></i>
            设备维修申请
          </h2>
          <p class="page-subtitle text-muted">
            请填写设备故障信息，提交维修申请
          </p>
        </div>

        <!-- 当前用户信息 -->
        <div class="user-info-card mb-4" *ngIf="currentUser$ | async as currentUser">
          <div class="card">
            <div class="card-header">
              <h6 class="mb-0">
                <i class="bi bi-person-circle"></i>
                当前用户信息
              </h6>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <strong>姓名:</strong> {{ currentUser.name }}
                </div>
                <div class="col-md-6">
                  <strong>角色:</strong> 
                  <span class="badge" [class.bg-primary]="currentUser.role === UserRole.TECHNICIAN" 
                        [class.bg-success]="currentUser.role === UserRole.ADMIN">
                    {{ currentUser.role === UserRole.TECHNICIAN ? '维修工' : '管理员' }}
                  </span>
                </div>
                <div class="col-md-6">
                  <strong>部门:</strong> {{ currentUser.department }}
                </div>
                <div class="col-md-6">
                  <strong>联系方式:</strong> {{ currentUser.phone }}
                </div>
              </div>
              
              <!-- 角色切换按钮（演示用） -->
              <div class="role-switch mt-3">
                <small class="text-muted">演示模式 - 切换角色:</small>
                <div class="btn-group btn-group-sm ms-2">
                  <button class="btn btn-outline-primary" 
                          [class.active]="currentUser.role === UserRole.TECHNICIAN"
                          (click)="switchToTechnician()">
                    维修工
                  </button>
                  <button class="btn btn-outline-success" 
                          [class.active]="currentUser.role === UserRole.ADMIN"
                          (click)="switchToAdmin()">
                    管理员
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 维修申请表单 -->
        <div class="repair-form-card">
          <div class="card">
            <div class="card-header">
              <h5 class="mb-0">
                <i class="bi bi-clipboard-data"></i>
                设备故障信息
              </h5>
            </div>
            <div class="card-body">
              <form (ngSubmit)="onSubmit()" #repairForm="ngForm">
                
                <!-- 维修标题 -->
                <div class="form-group mb-3">
                  <label for="title" class="form-label">
                    <i class="bi bi-card-heading"></i>
                    维修标题 <span class="text-danger">*</span>
                  </label>
                  <input type="text" 
                         id="title"
                         class="form-control" 
                         [(ngModel)]="requestForm.title"
                         name="title"
                         placeholder="请输入维修标题，如: 设备故障维修申请"
                         required>
                  <div class="form-text">简要描述本次维修申请的主要内容</div>
                </div>

                <!-- 设备编号 -->
                <div class="form-group mb-3">
                  <label for="deviceId" class="form-label">
                    <i class="bi bi-hash"></i>
                    设备ID <span class="text-danger">*</span>
                  </label>
                  <input type="number" 
                         id="deviceId"
                         class="form-control" 
                         [(ngModel)]="requestForm.deviceId"
                         name="deviceId"
                         placeholder="请输入设备ID，如: 1"
                         min="1"
                         required>
                  <div class="form-text">请输入设备的数字ID（正整数）</div>
                </div>

                <!-- 设备型号 -->
                <div class="form-group mb-3">
                  <label for="deviceModel" class="form-label">
                    <i class="bi bi-cpu"></i>
                    设备型号 <span class="text-danger">*</span>
                  </label>
                  <input type="text" 
                         id="deviceModel"
                         class="form-control" 
                         [(ngModel)]="requestForm.deviceModel"
                         name="deviceModel"
                         placeholder="请输入设备型号，如: CNC-2000X"
                         required>
                  <div class="form-text">设备的具体型号和规格</div>
                </div>

                <!-- 紧急程度 -->
                <div class="form-group mb-3">
                  <label class="form-label">
                    <i class="bi bi-speedometer2"></i>
                    紧急程度 <span class="text-danger">*</span>
                  </label>
                  <div class="urgency-levels">
                    <div class="btn-group d-flex" role="group">
                      <ng-container *ngFor="let level of urgencyLevels; trackBy: trackByUrgency">
                        <input type="radio" 
                               class="btn-check" 
                               [id]="'urgency-' + level.value"
                               [value]="level.value"
                               [(ngModel)]="requestForm.urgencyLevel"
                               name="urgencyLevel"
                               required>
                        <label class="btn flex-fill" 
                               [for]="'urgency-' + level.value"
                               [class]="'btn-outline-' + level.color">
                          {{ level.label }}
                        </label>
                      </ng-container>
                    </div>
                  </div>
                  <div class="form-text">选择设备故障的紧急程度</div>
                </div>

                <!-- 故障描述 -->
                <div class="form-group mb-4">
                  <label for="faultDescription" class="form-label">
                    <i class="bi bi-exclamation-triangle"></i>
                    故障描述 <span class="text-danger">*</span>
                  </label>
                  <textarea id="faultDescription"
                            class="form-control" 
                            rows="4"
                            [(ngModel)]="requestForm.faultDescription"
                            name="faultDescription"
                            placeholder="请详细描述设备故障现象、出现时间、影响范围等信息..."
                            required></textarea>
                  <div class="form-text">请尽可能详细地描述故障情况，以便维修人员准确判断</div>
                </div>

                <!-- 提交按钮 -->
                <div class="form-actions">
                  <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                    <button type="button" 
                            class="btn btn-outline-secondary"
                            routerLink="/dashboard">
                      <i class="bi bi-arrow-left"></i>
                      返回
                    </button>
                    <button type="submit" 
                            class="btn btn-primary"
                            [disabled]="isSubmitting || !repairForm.form.valid">
                      <span *ngIf="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
                      <i *ngIf="!isSubmitting" class="bi bi-send"></i>
                      {{ isSubmitting ? '提交中...' : '提交申请' }}
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- 帮助信息 -->
        <div class="help-info mt-4">
          <div class="card border-info">
            <div class="card-header bg-info text-white">
              <h6 class="mb-0">
                <i class="bi bi-info-circle"></i>
                填写说明
              </h6>
            </div>
            <div class="card-body">
              <ul class="mb-0">
                <li><strong>维修标题:</strong> 简要概括本次维修申请的主要内容</li>
                <li><strong>设备ID:</strong> 请输入设备的数字ID（正整数）</li>
                <li><strong>设备型号:</strong> 设备的具体型号，有助于准备相应的维修方案</li>
                <li><strong>紧急程度:</strong> 根据故障对生产的影响程度选择</li>
                <li><strong>故障描述:</strong> 详细描述有助于维修人员快速定位问题</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 